import React, { useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import { ConfigProvider, Tabs, TabPane } from '@nutui/nutui-react-taro'
import './index.scss'

function Message() {
  const [activeTab, setActiveTab] = useState('0')

  // 模拟数据
  const systemMessages = [
    {
      id: 1,
      title: '系统通知',
      content: '欢迎使用露营小程序，探索更多精彩露营体验！',
      time: '2023-06-01 10:30',
      read: true
    },
    {
      id: 2,
      title: '活动通知',
      content: '近期有多个露营活动即将开展，点击查看详情',
      time: '2023-05-28 14:20',
      read: false
    },
    {
      id: 3,
      title: '安全提醒',
      content: '雨季来临，请注意户外露营安全，关注天气变化',
      time: '2023-05-25 09:15',
      read: false
    }
  ]

  const groupMessages = [
    {
      id: 1,
      name: '青山绿水营地群',
      avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      lastMessage: '张三: 这周末天气不错，有人一起去露营吗？',
      time: '10:30',
      unread: 3
    },
    {
      id: 2,
      name: '露营爱好者交流群',
      avatar: 'https://img01.yzcdn.cn/vant/dog.jpeg',
      lastMessage: '李四: 分享一下我最近买的新帐篷',
      time: '昨天',
      unread: 0
    },
    {
      id: 3,
      name: '星空营地群',
      avatar: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
      lastMessage: '系统消息: 营地将于本周六举办篝火晚会',
      time: '星期一',
      unread: 1
    }
  ]

  const privateMessages = [
    {
      id: 1,
      name: '张三',
      avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      lastMessage: '最近怎么样？有空一起去露营吗？',
      time: '12:30',
      unread: 2
    },
    {
      id: 2,
      name: '李四',
      avatar: 'https://img01.yzcdn.cn/vant/dog.jpeg',
      lastMessage: '你上次推荐的那个营地真不错！',
      time: '昨天',
      unread: 0
    },
    {
      id: 3,
      name: '王五',
      avatar: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
      lastMessage: '我刚发了一篇露营攻略，快来看看',
      time: '星期二',
      unread: 0
    }
  ]

  const handleTabChange = (value) => {
    setActiveTab(value)
  }

  const renderSystemMessages = () => {
    return (
      <View className='message-list'>
        {systemMessages.map(message => (
          <View className={`message-item ${!message.read ? 'unread' : ''}`} key={message.id}>
            <View className='message-content'>
              <Text className='message-title'>{message.title}</Text>
              <Text className='message-text'>{message.content}</Text>
              <Text className='message-time'>{message.time}</Text>
            </View>
            {!message.read && <View className='unread-dot'></View>}
          </View>
        ))}
      </View>
    )
  }

  const renderChatItem = (chat, isGroup = false) => {
    return (
      <View className='chat-item' key={chat.id}>
        <View className='chat-avatar'>
          <Image className='avatar-image' src={chat.avatar} mode='aspectFill' />
          {chat.unread > 0 && (
            <View className='unread-badge'>{chat.unread}</View>
          )}
        </View>
        <View className='chat-info'>
          <View className='chat-header'>
            <Text className='chat-name'>{chat.name}</Text>
            <Text className='chat-time'>{chat.time}</Text>
          </View>
          <Text className='chat-message'>{chat.lastMessage}</Text>
        </View>
      </View>
    )
  }

  const renderGroupMessages = () => {
    return (
      <View className='chat-list'>
        {groupMessages.map(group => renderChatItem(group, true))}
      </View>
    )
  }

  const renderPrivateMessages = () => {
    return (
      <View className='chat-list'>
        {privateMessages.map(chat => renderChatItem(chat))}
      </View>
    )
  }

  return (
    <ConfigProvider>
      <View className='message-page'>
        <Tabs 
          value={activeTab} 
          onChange={handleTabChange}
          className='message-tabs'
        >
          <TabPane title='系统消息' value='0'>
            {renderSystemMessages()}
          </TabPane>
          <TabPane title='群组消息' value='1'>
            {renderGroupMessages()}
          </TabPane>
          <TabPane title='私信' value='2'>
            {renderPrivateMessages()}
          </TabPane>
        </Tabs>
      </View>
    </ConfigProvider>
  )
}

export default Message 